<!--数据字典列表   系统管理员-->
<template>
  <div id="DataDictionaryList">
    <!--         Breadcrumbs -->
    <div class="breadcrumbs" style="margin: 0px;padding-top: 20px;">
      <ul>
        <li class="home"><a href="index.html" title="Go to Home Page"><strong style="font-size: 18px;">基础数据</strong></a>
          <span>/</span>
        </li>
        <li><strong>数据字典管理</strong><span>/</span></li>
        <li><strong>数据字典列表</strong></li>
      </ul>
    </div>
    <article class="col-main">
      <div class="my-account block block-account" style="padding-left: 20px;padding-right: 20px;">
        <div style="padding: 20px 20px 30px 20px">
          <span style="font-size: 30px;font-weight: bolder">数据字典列表</span>
          <router-link to="CreateDataDictionary"  class="btn btn-success" style="float: right;margin-top: 10px">新建数据字典</router-link>
        </div>

        <form action="">
          <div class="row" style="margin-bottom: 30px">
            <div class="col-sm-1 col-md-1"></div>
            <div class="col-sm-1 col-md-1 text-center" style="padding: 0px">
              <h4>类别:</h4>
            </div>
            <div class="col-sm-2 col-md-2">
              <select v-model="dateDictionary.parentId" class="form-control" style="width: 110px">
                <option value="0" >-请选择-</option>
                <option value="1" >全部类别</option>
                <option v-for="item in dictionaryTypes" :value=" item.dictionaryId ">{{ item.dictionaryValue }}</option>
              </select>
            </div>
            <div class="col-sm-1 col-md-1 text-center" style="padding: 0px">
              <h4>条目:</h4>
            </div>
            <div class="col-sm-2 col-md-2">
              <input v-model="dateDictionary.dictionaryEntry" class="form-control" placeholder="请输入数据字典的条目" style="width: 110px;">
            </div>
            <div class="col-sm-1 col-md-1 text-center" style="padding: 0px">
              <h4>值:</h4>
            </div>
            <div class="col-sm-2 col-md-2">
              <input v-model="dateDictionary.dictionaryValue" class="form-control" placeholder="请输入数据字典的值" style="width: 110px;">
            </div>
            <div class="col-sm-2 col-md-2">
              <button v-on:click="loadDictionaries" class="btn btn-primary">查询</button>
            </div>
          </div>

        </form>

        <table class="table">
          <thead>
          <tr>
            <th>编号</th>
            <th>类别</th>
            <th>条目</th>
            <th>值</th>
            <th>是否可修改</th>
            <th>操作</th>
          </tr>
          </thead>
          <tbody>
          <tr v-for="(item,index) in dateDictionaries">
            <th scope="row">{{index+1+(current-1)*limit}}</th>
            <td>{{item.dictionaryType}}</td>
            <td>{{item.dictionaryEntry}}</td>
            <td>{{item.dictionaryValue}}</td>
            <td>{{item.isEdit == 1 ? "可以修改" : "不可修改"}}</td>
            <td>
              <button v-on:click="toUpdateDictionary(item.dictionaryId)" v-show="item.isEdit == 1" class="btn btn-default btn-sm">编辑</button>
              <button @click="open(item.dictionaryId,item.dictionaryEntry)" v-show="item.isEdit == 1" to="" class="btn btn-danger btn-sm">删除</button>
            </td>
          </tr>
          </tbody>
        </table>

        <div class="block text-center">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </div>
      </div>
    </article>
  </div>
</template>

<script>
export default {
  name: "DataDictionaryList",
  data(){
    return{
      dateDictionaries:[],
      currentPage: 1,
      limit:10,
      current:1,
      total:0,
      dictionaryTypes:[],
      dateDictionary:{
        parentId:0,
        dictionaryValue:'',
        dictionaryEntry:''
      }
    }
  },
  methods:{
    handleSizeChange(val) {
      this.limit = val;
      this.loadDictionaries()
    },
    handleCurrentChange(val) {
      this.current = val;
      this.loadDictionaries()
    },
    loadDictionaryTypes(){

      this.$axios.get("/dictionary/loadDictionaryTypes").then(
        res=>{
          this.dictionaryTypes = res.data.data.dictionaryTypes;
        }
      )
    },
    loadDictionaries(){
      console.log(this.dateDictionary)
      this.$axios.get("/dictionary/LoadDictionaries",{
        params:{
          current:this.current,
          limit:this.limit,
          parentId:this.dateDictionary.parentId,
          dictionaryValue:this.dateDictionary.dictionaryValue,
          dictionaryEntry:this.dateDictionary.dictionaryEntry
        }
      }).then(
        res=>{
          this.dateDictionaries= res.data.data.myData.dictionaries;
          this.total = res.data.data.total
        }
      )
    },
    toUpdateDictionary(dictionaryId){
      this.$router.push({path:'/MemuBar/UpdateDateDictionary',query: {dictionaryId:dictionaryId}})
    },
    open(dictionaryId,dictionaryEntry) {
      this.$confirm('此操作将永久删除 【'+dictionaryEntry+'】 , 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(() => {
        this.$axios.delete("/dictionary/deleteDictionary",{
          params:{
            dictionaryId:dictionaryId
          }
        }).then(
          res=>{
            this.$message({
              type: 'success',
              message: res.data.message
            });
            this.$router.go(0)
          }
        )
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    }
  },
  created() {
    this.loadDictionaryTypes(),
    this.loadDictionaries()
  }
}
</script>

<style scoped>

</style>
